<div class="main">
  <div class="slider">
    <div class="slider-content">
      <div class="left">
        <img [@flyInOut]="flyInOutStatus" src="{{sliderPics[sliderIndex] && sliderPics[sliderIndex].left}}" alt="">
        <div class="download-area">
          <span>版本：6.23正式版</span><span>时间：2020年4月3日</span><span>大小：26.3MB</span><br>
          <span>适用：Win10/Win8.1/Win8/Win7/Vista/XP</span><br>
          <div class="btn">
            立即下载
          </div>
        </div>
      </div>
      <div class="right">
        <img [@flyInOut]="flyInOutStatus" src="{{sliderPics[sliderIndex] && sliderPics[sliderIndex].right}}" alt="">
      </div>
    </div>
    <div class='slider-foot'>
      <div [@flyInOut]="flyInOutStatus" class="slider-foot-point" [ngClass]="{'active': sliderIndex === 0}"
        (click)="sliderAnimation(0)">0
      </div>
      <div [@flyInOut]="flyInOutStatus" class="slider-foot-point" [ngClass]="{'active': sliderIndex === 1}"
        (click)="sliderAnimation(1)">1</div>
      <div [@flyInOut]="flyInOutStatus" class="slider-foot-point" [ngClass]="{'active': sliderIndex === 2}"
        (click)="sliderAnimation(2)">2</div>
      <div [@flyInOut]="flyInOutStatus" class="slider-foot-point" [ngClass]="{'active': sliderIndex === 3}"
        (click)="sliderAnimation(3)">3</div>
    </div>
  </div>
  <div class="content">
    <div class="chunk">
      <p>
        <img src="https://mofang.ruanmei.com/v2/images/title.png" alt=""><br><br>
        <span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历经Vista优化大师、Win7优化大师发展而来，软媒魔方6支持64位和32位的所有主流Windows系统，
          从优化大师发展为一款系统增强套装自动化、智能化解决各种电脑问题。软媒魔方内置20余款强大、绿色化的知名组件，清理、美化、桌面增强、
          系统雷达、通知区万年历优化加速、安全守护、软件管家、电脑医生、虚拟光驱、U盘装机等等。
        </span>
      </p>
    </div>
    <div class="chunk" style="background-color: #359EC3;">
      <img src="https://mofang.ruanmei.com/v2/images/feature1.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro1.png" alt="">
    </div>
    <div class="chunk" style="background-color: #B356A1;">
      <img src="https://mofang.ruanmei.com/v2/images/feature2.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro2.png" alt="">
    </div>
    <div class="chunk" style="background-color: #3CB796;">
      <img src="https://mofang.ruanmei.com/v2/images/feature3.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro3.png" alt="">
    </div>
    <div class="chunk" style="background-color: #E48069;">
      <img src="https://mofang.ruanmei.com/v2/images/feature4.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro4.png" alt="">
    </div>
    <div class="chunk" style="background-color: #359EC3;">
      <img src="https://mofang.ruanmei.com/v2/images/feature5.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro5.png" alt="">
    </div>
    <div class="chunk" style="background-color: #D8B688;">
      <img src="https://mofang.ruanmei.com/v2/images/feature6.jpg" alt="">
      <img src="https://mofang.ruanmei.com/v2/images/intro6.png" alt="">
    </div>
  </div>
</div>
